<template>
    <div class="app-range-editor">
        <template v-for="(item, index) in refFormItem">
            <span v-if="index > 0" class="editor-space" :key="index + 10">~</span>
            <date-picker
                :key="index"
                v-if="Object.is(editorType, 'DATEPICKEREX') || Object.is(editorType, 'DATEPICKEREX_NOTIME')"
                type="date"
                :transfer="true"
                :format="valFormat"
                :placeholder="$t('components.appRangeEditor.placeholder')"
                :value="activeData[item]"
                :disabled="disabled"
                @on-change="
                    (value, type) => {
                        onValueChange(item, value);
                    }
                "
            >
            </date-picker>
            <time-picker
                :key="index"
                v-else-if="editorType.startsWith('DATEPICKEREX')"
                :transfer="true"
                :format="valFormat"
                :placeholder="$t('components.appRangeEditor.placeholder')"
                :value="activeData[item]"
                :disabled="disabled"
                @on-change="
                    (value) => {
                        onValueChange(item, value);
                    }
                "
            >
            </time-picker>
            <InputNumber
                :key="index"
                v-else-if="Object.is(editorType, 'NUMBER')"
                :value="activeData[item]"
                :disabled="disabled"
                :placeholder="$t('components.appRangeEditor.input')"
                @on-change="
                    (value) => {
                        onValueChange(item, value);
                    }
                "
            >
            </InputNumber>
            <app-span
                :key="index"
                v-else-if="Object.is(editorType, 'SPAN')"
                :value="activeData[item]"
                :disabled="disabled"
            >
            </app-span>
            <el-input
                :key="index"
                v-else
                :value="getValue(item)"
                :disabled="disabled"
                :placeholder="$t('components.appRangeEditor.input')"
                @input="
                    (value) => {
                        onValueChange(item, value);
                    }
                "
            >
            </el-input>
        </template>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({})
export default class AppRangeEditor extends Vue {
    /**
     * 编辑项名称
     *
     * @type {string}
     * @memberof AppRangeEditor
     */
    @Prop() public name!: string;

    /**
     * 是否禁用
     *
     * @type {boolean}
     * @memberof AppRangeEditor
     */
    @Prop() public disabled!: boolean;

    /**
     * 表单数据对象
     *
     * @type {*}
     * @memberof AppRangeEditor
     */
    @Prop() public activeData: any;

    /**
     * 值格式
     *
     * @type {string}
     * @memberof AppRangeEditor
     */
    @Prop() public format!: string;

    /**
     * 编辑器类型
     *
     * @type {string}
     * @memberof AppRangeEditor
     */
    @Prop() public editorType!: string;

    /**
     * 关系表单项集合
     *
     * @type {string[]}
     * @memberof AppRangeEditor
     */
    @Prop() public refFormItem!: string[];

    /**
     * 值变化时间
     *
     * @private
     * @type {Subject<any>}
     * @memberof InputBox
     */
    private inputDataChang: Subject<any> = new Subject();

    /**
     * 处理值格式
     *
     * @readonly
     * @memberof AppRangeEditor
     */
    get valFormat() {
        return this.format.replace('YYYY', 'yyyy').replace('DD', 'dd');
    }

    /**
     * 获取值
     *
     * @param {string} name
     * @returns
     * @memberof AppRangeEditor
     */
    public getValue(name: string) {
        return this.activeData[name];
    }

    /**
     * 设置值
     *
     * @param {string} name
     * @param {*} val
     * @memberof AppRangeEditor
     */
    public setValue(name: string, val: any) {
        this.inputDataChang.next({ name: name, value: val });
    }

    /**
     * vue  声明周期 debounceTime
     *
     * @memberof InputBox
     */
    public created() {
        this.inputDataChang.pipe(debounceTime(500), distinctUntilChanged()).subscribe((data: any) => {
            this.$emit('formitemvaluechange', { name: data.name, value: data.value });
        });
    }

    /**
     * 值改变
     *
     * @param {string} name
     * @param {*} value
     * @memberof AppRangeEditor
     */
    public onValueChange(name: string, value: any) {
        this.$emit('formitemvaluechange', { name: name, value: value });

        let count = 0;
        if (this.refFormItem) {
            this.refFormItem.forEach((item: any) => {
                if (this.activeData[item] != null && !Object.is(this.activeData[item], '')) {
                    count++;
                }
            });
        }
        this.$emit('formitemvaluechange', {
            name: this.name,
            value: count === this.refFormItem.length ? 'not null' : null,
        });
    }
}
</script>

<style lang="less">
@import './app-range-editor.less';
</style>
